console.log(location.href)
var url = location.href
var wangzhi = getUrlParams(url)
console.log(wangzhi)
let { couponid } = wangzhi
var ul = document.querySelector('body>ul')
console.log(ul)
//ol是轮播图
var ol = document.querySelector('body>ol')
var ol2=$('body>ol')
var div=$('body>ol>div')
console.log(div)
console.log(ol)
var xhr = new XMLHttpRequest()
xhr.open('get', `http://chst.vip:1234/api/getcouponproduct?couponid=${couponid}`)
xhr.send()
xhr.onreadystatechange = function () {
    if (xhr.status === 200 && xhr.readyState === 4) {
        // console.log(xhr.responseText)
        var x = JSON.parse(xhr.responseText).result
        console.log(x)
        var html = ''
        var html2 = ''
        x.forEach(item => {
            html += `
            <li>
           ${item.couponProductImg}
            <p>${item.couponProductName}</p>
            <b>${item.couponProductPrice}</b>
            <i>${item.couponProductTime}</i>
        </li>`

            html2 += `<li>
        ${item.couponProductImg}</li>`
        });
        html2 += ` <div>
        <button><</button>
        <button>></button>
        <button>x</button>
    </div>`
        ul.innerHTML = html
        ol.innerHTML = html2
        //给轮播图写相应事件
        var lis = document.querySelectorAll('body>ul>li')
        lis.forEach((iteml, index) => {
            iteml.onclick = function () {
                ol.style.display='block'
                ol2.animate({top:"6rem"},200)
          
                $('body>ol>li').eq(index).css({ opacity: 1 })
                $('body>ol>li').eq(index).siblings('body>ol>li').css({ opacity: 0 })
                ol.style.display = "flex"
                ol.style.left = -5.33 * index + 'rem'
                //获取两个按钮及删除
                var btn1 = document.querySelector('ol>div>button:nth-of-type(1)')
                var btn2 = document.querySelector('ol>div>button:nth-of-type(2)')
                var btn3 = document.querySelector('ol>div>button:nth-of-type(3)')
               setTimeout(()=>{
                   btn1.style.display='block'
                   btn2.style.display='block'
                   btn3.style.display='block'
               },1000)
                btn1.onclick = function () {
                    index--
                    if (index === -1) {
                        alert('已经在第一页了')
                        index = 0
                    }
                    ol.style.left = -5.33 * index + 'rem'
                    $('body>ol>li').eq(index).css({ opacity: 1 })
                   
                      $('body>ol>li').eq(index).siblings('body>ol>li').css({opacity:0})
                }

                btn2.onclick = function () {
                    index++
                    if (index === lis.length) {
                        alert('已经是最后一页了')
                        index = lis.length - 1
                    }
                    ol.style.left = -5.33 * index + 'rem'
                    $('body>ol>li').eq(index).css({ opacity: 1 })
                    $('body>ol>li').eq(index).siblings('body>ol>li').css({opacity:0})
                }
             
            }
        })
        var btn3 = document.querySelector('ol>div>button:nth-of-type(3)')
        console.log(btn3)
        btn3.onclick = function () {
          
            var btn1 = document.querySelector('ol>div>button:nth-of-type(1)')
            var btn2 = document.querySelector('ol>div>button:nth-of-type(2)')
           
            ol2.animate({top:"-15rem"},200)
          
            btn1.style.display='none'
            btn2.style.display='none'
            this.style.display='none'
          
          
         
        }
    }
}

//返回首页
var fanhui = document.querySelector('header>a')
fanhui.onclick = function () {
    location.href = "./6.html"
}